<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../../static/layuiadmin/layui/css/layui.css"
          th:href="@{/layuiadmin/layui/css/layui.css}"
          media="all">
    <link rel="stylesheet" href="../../../static/layuiadmin/style/admin.css"
          th:href="@{/layuiadmin/style/admin.css}"
          media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">用户详情</div>
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="component-form-group" th:object="${user}">
                <input name="userId" type="hidden" th:field="*{id}"/>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">登录名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" readonly lay-verify="required" placeholder="请输入"
                                   autocomplete="off"
                                   class="layui-input" th:field="*{loginName}"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入"
                                   autocomplete="off"
                                   class="layui-input" th:field="*{userName}"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"
                                   class="layui-input" th:field="*{mobile}"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">邮箱地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input"
                                   th:value="*{email}"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">

                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="sex" title="男" value="0" th:field="*{sex}"/>
                        <input type="radio" name="sex" title="女" value="1" th:field="*{sex}"/>
                    </div>

                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="status" lay-skin="switch"
                               lay-filter="status" lay-text="启用|停用"
                               th:attr="checked=${user.status == 0 ? true : false}"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <span th:each="role : ${roles}">
                            <input type="checkbox" name="roleId" th:value="${role.id}" th:checked="${role.checked}" lay-skin="primary" th:attr="title=${role.roleName}">
                        </span>
                    </div>

                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="text" placeholder="请输入内容" class="layui-textarea"
                                  th:field="*{remarks}"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                            <button type="button" class="layui-btn layui-btn-primary" onClick="javascript :history.back(-1);">返回</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="../../../static/jquery/jquery.min.js" th:src="@{/jquery/jquery.min.js}"></script>
<script src="../../../static/layuiadmin/layui/layui.js" th:src="@{/layuiadmin/layui/layui.js}"></script>
<script th:inline="javascript"> var ctx = [[@{
    /}]]; var captchaType = [[${captchaType}]];
</script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form', 'index', 'table', 'laydate'], function () {
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , layer = layui.layer
            , laydate = layui.laydate
            , form = layui.form;

        form.render(null, 'component-form-group');

        laydate.render({
            elem: '#LAY-component-form-group-date'
        });


        /* 监听提交 */
        form.on('submit(component-form-demo1)', function (data) {

            //获取选中的角色
            if ($("input:checkbox[name='roleId']:checked").length == 0) {
                layer.msg("请选择角色", {icon: 5, shift: 6});
                return false;
            }
            //获取checkbox[name='roleId']的值，获取所有选中的复选框，并将其值放入数组中
            let arr = new Array();
            $("input:checkbox[name='roleId']:checked").each(function(i){
                arr[i] = $(this).val();
            });
            //  替换 data.field.foodId的数据为拼接后的字符串
            data.field.roleId = arr.join(",");//将数组合并成字符串

            if(data.field.status == "on") {
                data.field.status = "0";
            } else {
                data.field.status = "1";
            }
            $.ajax({
                url: ctx + "back/sysUser/edit",
                async: false,
                data: data.field,
                type: "post",
                dataType: "json",
                success: function (data) {
                    if(data.code == 0) {
                        layer.msg(data.msg, {time: 1000, icon: 1, shade: [0.8, '#393D49']}, function () {

                            window.location.href = ctx + "back/sysUser";
                        });
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                },
                error: function (e) {
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
